<template>
    <div class="home" ref="home">
        <div class="topimg topBg marginBt" ref="topBg">
            <div class="img-desc">
                <img class="logo" src="~common/image/base/logo.png" alt="">
                <h2 class="title">WEDDING LIVE<br>一场视觉盛宴<br>正在发生...</h2>
                <button class="btn"><router-link :to="{ name: 'ourInfo'}">抽取免费试用机会</router-link></button>
            </div>
        </div>
        <div class="swiper marginBt" ref="swiperContent">
            <swiper :options="swiperOption" ref="mySwiper">
                <!-- slides -->
                <swiper-slide class="topimg marginBt">
                    <img class="auto-img img" src="http://weddingimg-oss.tvunetworks.cn/weddinglive-image/20181210/802a3b8d61d64b9388c681844c333885.png" alt="">
                    <div class="img-desc">
                        <h2 class="title white">王室婚礼 直啵选择</h2>
                        <p class="text white">WEDDING LIVE 皇家品质 高清直播</p>
                        <button class="btn"><router-link :to="{ name: 'ourInfo'}">抽取免费试用机会</router-link></button>
                    </div>
                    <div class="shadow"></div>
                </swiper-slide>
                <swiper-slide class="topimg marginBt">
                    <img class="auto-img img" src="http://weddingimg-oss.tvunetworks.cn/weddinglive-image/20181210/b162d78a281c4a749857fa74d23e1688.png" alt="">
                    <div class="img-desc">
                        <h2 class="title white">海外婚礼</h2>
                        <p class="text white">覆盖全球的婚礼直播服务<br>海外婚礼，用婚礼直啵</p>
                        <button class="btn"><router-link :to="{ name: 'ourInfo'}">抽取免费试用机会</router-link></button>
                    </div>
                    <div class="shadow"></div>
                </swiper-slide>
                <swiper-slide class="topimg marginBt">
                    <img class="auto-img img" src="http://weddingimg-oss.tvunetworks.cn/weddinglive-image/20181210/7fdf134d7c94409c9ef8141afa93e516.png" alt="">
                    <div class="img-desc">
                        <h2 class="title white">亲朋好友无法到场</h2>
                        <p class="text white">难以亲临？随时随地连接婚礼现场！<br>异地婚礼，用婚礼直啵！</p>
                        <button class="btn"><router-link :to="{ name: 'ourInfo'}">抽取免费试用机会</router-link></button>
                    </div>
                    <div class="shadow"></div>
                </swiper-slide>
                <swiper-slide class="topimg marginBt">
                    <img class="auto-img img" src="http://weddingimg-oss.tvunetworks.cn/weddinglive-image/20181210/f097dc4fb8fe4865b35dc1c52a71eb92.png" alt="">
                    <div class="img-desc">
                        <h2 class="title white">分会场投屏</h2>
                        <p class="text white">婚礼场地不受限，幸福画面分会场同步见<br>分会场投屏，用婚礼直啵！</p>
                        <button class="btn"><router-link :to="{ name: 'ourInfo'}">抽取免费试用机会</router-link></button>
                    </div>
                    <div class="shadow"></div>
                </swiper-slide>
                <!-- Optional controls -->
                <div class="swiper-pagination"  slot="pagination"></div>
                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
                <div class="swiper-scrollbar"   slot="scrollbar"></div>
            </swiper>
        </div>
        <div class="InteractiveBox page-wapperMin marginBt">
            <div class="page-title" v-animate='"animated bounceIn"' data-wow-duration="1s">
                <h2 class="title">一站式婚礼直播服务</h2>
                <p class="text">无需下载，微信直接观看</p>
                <p class="textEng savoye">No need to download, WeChat direct watch</p>
            </div>
            <div class="imgBox">
                <li class="liList" v-for="(item, index) in interactiveArr" :key="index" :class="item.className">
                    <img v-if="index!=2" class="auto-img img" :src="item.imgSrc" alt="">
                    <div v-if="index ==0"></div>
                    <div v-else-if="index!=2" class="shadow"><span>{{item.text}}</span></div>
                    <div v-else class="midText">
                        <img src="~common/image/logo_big.png" alt="">
                        <h3>直啵套餐</h3>
                        <p>￥1988<span>起</span></p>
                    </div>
                </li>
            </div>
        </div>
        <div class="WhyZhibo page-wapper marginBt">
            <div class="page-title" v-animate='"animated bounceIn"' data-wow-duration="1s">
                <h2 class="title">为什么要婚礼直播？</h2>
                <p class="textEng savoye">Why do you want a wedding broadcast?</p>
            </div>
            <div class="imgBox clear">
                <li class="liList" v-for="(item, index) in whyZhibo" :key="index">
                    <img class="auto-img img" :src="item.imgSrc" alt="">
                    <div style="margin-top:20px;">
                        <h3 class="title">{{item.title}}</h3>
                        <p class="text">{{item.text}}</p>
                    </div>
                </li>
            </div>
        </div>
        <button class="freeuse marginBt"><router-link :to="{ name: 'ourInfo'}">立即订阅</router-link></button>
        <div class="wedding-experience page-wapper marginBt" ref="weddingExperience">
            <div class="page-title" v-animate='"animated bounceIn"' data-wow-duration="1s">
                <h2 class="title">案例集锦</h2>
            </div>
            <div class="picbox">
                <ul class="imgLi">
                    <li v-for="(item, index) in caseArr" :key="index">
                        <img class="auto-img minImg" :src="item.imgSrc" alt="">
                        <p class="btnCommen">{{item.title}}</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="our-partner">
            <div class="page-wapper">
                <div class="page-title" v-animate='"animated bounceIn"' data-wow-duration="1s">
                    <h2 class="title">Our Partner</h2>
                    <p class="text">合作伙伴</p>
                </div>
                <div class="imgbox">
                    <li class="imglist"><img src="~common/image/home/22HOW.png" alt=""></li>
                    <li class="imglist"><img src="~common/image/home/1.png" alt=""></li>
                    <li class="imglist"><img src="~common/image/home/2.png" alt=""></li>
                    <li class="imglist"><img src="~common/image/home/3.png" alt=""></li>
                    <li class="imglist"><img src="~common/image/home/4.png" alt=""></li>
                    <li class="imglist"><img src="~common/image/home/5.png" alt=""></li>
                    <li class="imglist"><img src="~common/image/home/6.png" alt=""></li>
                    <li class="imglist"><img src="~common/image/home/7.png" alt=""></li>
                    <li class="imglist"><img src="~common/image/home/8.png" alt=""></li>
                    <li class="imglist"><img src="~common/image/home/9.png" alt=""></li>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import { config } from 'common/js/config';
export default {
    name: 'carrousel',
    metaInfo: {
        title: '直啵官网',
        meta: [
            {
                name: '婚礼直啵',
                content: '亲友无法到场,婚礼全程记录,海外婚礼,更多互动，更多分享'
            },
            {
                name: '婚礼直播',
                content: '一款专为婚礼直播设计的在线应用小程序'
            }
        ]
    },
    data() {
        return {
            interactiveArr: config.interactiveArr, // 红包礼物
            whyZhibo: config.whyZhibo,
            caseArr: config.caseArr,
            swiperOption: {
                loop: true,
            // autoplayDisableOnInteraction: true,
                grabCursor: true,
                keyboardControl: true,
                slidesPerView: 1,
                autoplay: true,
                disableOnInteraction: false,
                initialSlide: 0,
                speed: 500,
                setWrapperSize: true,
                width: window.innerWidth,
                autoheight: true,
                on: {                       // 窗口缩放时设置width
                    resize: function () {
                        this.params.width = window.innerWidth;
                        this.update();
                    }
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                },
                pagination: {
                    el: '.swiper-pagination'
                }
            },
            ifMobile: false,  // 是否为移动端
            hasShadow: false // 遮罩是否显示
        };
    },
    methods: {
        initial() {
            let wh = window.innerWidth;
            if (wh >= 900 && wh < 1400) {
            // PC端 宽度比例90%
                this.$refs.swiperContent.style.height = 0.448 * wh + 'px';
                // this.ifMobile = false;
            } else if (wh >= 768 && wh < 900 && wh !== 828) {
            // PC端 宽度比例75% 768为ipad适配
                this.$refs.swiperContent.style.height = 0.448 * wh + 'px';
                // this.ifMobile = false;
            } else if (wh < 768 || wh === 828) {
            // 移动设备 828单独适配plus
                this.$refs.topBg.style.height = 1.7786 * wh + 'px';
                // this.ifMobile = true;
            } else if (wh >= 1400 && wh <= 1920) {
            // PC大屏 固定宽度
                this.$refs.swiperContent.style.height = 0.448 * wh + 'px';
                this.ifMobile = false;
            } else {
                this.$refs.swiperContent.style.height = '600px';
                // this.ifMobile = false;
            }
        }
    },
    mounted() {
        let _this = this;
        _this.initial();
        window.addEventListener('resize', _this.initial);
    }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"
    .home
        position relative
        .topBg
            display none
            .logo
                display none
        .swiper
            display block
            height 860px
            color #fff
            background #ca9b9b
            .swiper-container
                height 100%
        .our-partner
            height 630px
            box-sizing border-box
            padding-top 30px
            margin 0 auto
            background #FFD7D7
            .imgbox
                width 1100px
                margin 0 auto
                font-size 0
                .imglist
                    display inline-block
                    margin 10px
        button.freeuse
            display block
            margin -30px auto 0 auto
            width 300px
            height 70px
            background $color-background-d
            border-radius 35px
            font-size 30px
            font-family PingFangSC-Medium
            font-weight 500
            color rgba(255,255,255,1)
            line-height 42px
            letter-spacing 1px
            cursor pointer
            a
                color #fff
        .WhyZhibo
            .liList
                width 25%
                padding 0 10px
                box-sizing border-box
                float left
                .title
                    font-size 24px
                    font-family PingFangSC-Regular
                    font-weight 400
                    color rgba(64,64,64,1)
                    line-height 40px
                .text
                    height 48px
                    font-size 14px
                    font-family PingFangSC-Light
                    font-weight 300
                    color rgba(102,102,102,1)
                    line-height 24px
        .InteractiveBox
            .imgBox
                width 100%
                .liList
                    display inline-block
                    position relative
                    margin-bottom 20px
                    &.imgMin
                        width 300px
                        height 300px
                    &.imgMid
                        width 470px
                        height 300px
                    &.imgMax
                        width 100%
                    &.imgCenter1
                        width 300px
                        height 300px
                        margin 0 20px
                    &.imgCenter2
                        width 470px
                        height 300px
                        margin 0 20px
                    .shadow
                        width 100%
                        height 70px
                        background rgba(0, 0, 0, 0.3)
                        bottom 0
                        left 0
                        position absolute
                        color #fff
                        text-align center
                        font-size 18px
                        line-height 70px
                    .midText
                        height 300px
                        width 300px
                        background #ff7878
                        color #fff
                        float left
                        text-align center
                        img
                            margin-top 60px
                        h3
                            font-size 25px
                            margin 20px 0 20px
                        p
                            font-size 45px
                            span
                                font-size 30px
@media screen and (max-width 1400px)
    .home
        .our-partner
            height 550px
            padding-top 40px
            .imgbox
                width 880px
        .InteractiveBox
            width 1024px
            .imgBox
                .liList
                    &.imgMin
                        width 200px
                        height 200px
                    &.imgMid
                        width 390px
                        height 200px
                    &.imgMax
                        width 100%
                    &.imgCenter1
                        width 200px
                        height 200px
                        margin 0 20px
                    &.imgCenter2
                        width 390px
                        height 200px
                        margin 0 20px
                    .shadow
                        width 100%
                        height 60px
                        background rgba(0, 0, 0, 0.3)
                        bottom 0
                        left 0
                        position absolute
                        color #fff
                        text-align center
                        font-size 18px
                        line-height 70px
                    .midText
                        height 200px
                        width 200px
                        background #ff7878
                        color #fff
                        float left
                        text-align center
                        img
                            margin-top 60px
                        h3
                            font-size 25px
                            margin 20px 0 20px
                        p
                            font-size 45px
                            span
                                font-size 30px
        .swiper
            display block
        .page-wapper
            button.moreBtn
                width 140px!important
                height 40px!important
                font-size 16px
                line-height 20px
                margin-top 25px
@media screen and (max-width 1000px)
    .home
        .our-partner
            height 600px
            padding-top 40px
            .imgbox
                width 880px
        .swiper
            display block
        .page-wapper
            button.moreBtn
                width 130px!important
                height 35px!important
                font-size 14px
                line-height 20px
                margin-top 20px
@media screen and (max-width 767px)
    .home
        .topBg
            display block
            background url("~common/image/img1.png") no-repeat left top
            .logo
                display inline-block
        .swiper
            display none
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3)
    // iphonePlus
    .home
        .topBg
            display block
            background url("~common/image/img1.png") no-repeat left top
            .logo
                display inline-block
        .swiper
            display none
</style>
